$header-height: 48px;
$footer-height: 70px;
$theme-color: #5066e1;

$margin-tops: (
  8: 8px,
  10: 10px,
  15: 15px,
  16: 16px,
  20: 20px,
  24: 24px,
);
@each $topKey, $top in $margin-tops {
  .mt-#{$topKey} {
    margin-top: $top;
  }
}

$margin-bottoms: (
  4: 4px,
  8: 8px,
  10: 10px,
  12: 12px,
  15: 15px,
  16: 16px,
  20: 20px,
  22: 22px,
  24: 24px,
  32: 32px,
  40: 40px,
  64: 64px,
);
@each $topKey, $top in $margin-bottoms {
  .mb-#{$topKey} {
    margin-bottom: $top;
  }
  .mr-#{$topKey} {
    margin-right: $top;
  }
  .ml-#{$topKey} {
    margin-left: $top;
  }
  .mt-#{$topKey} {
    margin-top: $top;
  }
  .mb-#{$topKey} {
    margin-bottom: $top;
  }
  .pdl-#{$topKey} {
    padding-left: $top;
  }
  .pdr-#{$topKey} {
    padding-right: $top;
  }
  .pdt-#{$topKey} {
    padding-top: $top;
  }
  .pdb-#{$topKey} {
    padding-bottom: $top;
  }
  .hh-#{$topKey} {
    height: $top;
  }
}

$font-size: (
  12: 12px,
  14: 14px,
  16: 16px,
  18: 18px,
  20: 20px,
  24: 24px,
);
@each $fontKey, $font in $font-size {
  .fs-#{$fontKey} {
    font-size: $font;
  }
}
#app {
  overflow-x: hidden;
}
.font333 {
  color: #333;
}
.font666 {
  color: #666;
}
.font999 {
  color: #999;
}
.fl,
.df {
  display: flex;
}
.fl-center {
  display: flex;
  align-items: center;
}
.fontw,
.bold {
  font-weight: bold;
}
.mla {
  margin-left: auto;
}
.mta {
  margin-top: auto;
}
.fdc {
  flex-direction: column;
}
.aic {
  align-items: center;
}
.jcsb {
  justify-content: space-between;
}
.jcc {
  justify-content: center;
}
.blue {
  color: #5066e1;
}
.bgw {
  background: white;
}
.boxs {
  box-shadow: inset 0px -1px 0px #eeeeee;
}
.mar-auto {
  margin: 0 auto;
}
.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overflow-xy {
  overflow-x: hidden;
  overflow-y: auto;
}
.operate-line {
  margin: 10px 0;
  .ant-btn + .ant-btn {
    margin-left: 10px;
  }
}

.full-size {
  width: 100%;
  height: 100%;
}
.pointer {
  cursor: pointer;
}
p {
  margin-bottom: 0 !important;
}

.ant-modal-footer {
  .ant-btn {
    border-radius: 2px;
  }
  .ant-btn.ant-btn-primary {
    // width: 120px;
  }
}

// 全局padding
.outer-padding {
  padding: 24px 32px;
  min-width: 1000px;
}
// 全局pointer
.pointer {
  cursor: pointer;
}
.outer-title {
  font-size: 18px;
  color: #333;
  display: flex;
  align-items: center;
  > p {
    margin-right: 6px;
  }
}

.ds-title {
  font-size: 24px;
  line-height: 32px;
  color: #333333;
  font-weight: bold;
  display: flex;
}
.ds-text {
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: #666;
}
.ds-info {
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: #999;
}

.pd-bottom--32 {
  padding-bottom: 32px;
}
.pd-top--32 {
  padding-top: 32px;
}
.mg-right--12 {
  margin-right: 12px;
}
.mg-left--24 {
  margin-left: 24px;
}

.tab {
  display: flex;
  border-bottom: 1px solid #eee;

  .tab-item {
    display: flex;
    font-size: 14px;
    margin-right: 48px;
    padding-bottom: 15px;
    cursor: pointer;

    .tab-item__title {
      margin-right: 8px;
      color: #666;
    }

    .tab-item__text {
      padding: 0 8px;
      height: 24px;
      max-height: 24px;
      overflow: hidden;
      background: rgba(221, 221, 221, 0.2);
      border-radius: 4px;
      color: #666;
    }
  }

  .active {
    border-bottom: 2px solid #5066e1;

    .tab-item__title {
      color: #333;
    }

    .tab-item__text {
      background: #5066e1;
      color: #fff;
    }
  }

  .read-btn {
    margin-left: auto;
    color: #666;
    cursor: pointer;
  }
}

.ant-upload {
  border-radius: 50% !important;
}

.ant-slider-mark-text {
  color: #999 !important;
}

.ant-radio-group .ant-radio-button-wrapper {
  width: 33.3%;
  text-align: center;
}
// 菜单
.ant-menu-dark .ant-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
}
